.analyse {
  &__board {
    grid-area: board;
  }

  &__tools {
    grid-area: tools;
  }

  &__controls {
    grid-area: controls;
  }

  display: grid;
  grid-template-areas:
    'board'
    'tools'
    'controls';
  grid-template-columns: auto;
  grid-template-rows: 100vw minmax(150px, calc(100vh - 100vw - 5.5rem)) 3rem;

  @media (min-width: 400px) and (min-aspect-ratio: 1/1) {
    grid-template-columns: minmax(200px, calc(100vh - 2.5rem)) minmax(200px, 1fr);
    grid-template-rows: auto 2.5rem;
    grid-template-areas: 'board tools' 'board controls';
  }
}

.pocket {
  &-top {
    grid-area: pocket-top;
  }

  &-bottom {
    grid-area: pocket-bot;
  }

  width: 100%;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3) inset;
  background: #888;
  border-radius: 0;
}

.analyse.variant-crazyhouse {
  grid-template-rows: 60px auto 2.5rem 60px;

  body.supports-max-content & {
    grid-template-rows: max-content auto 2.5rem max-content;
  }

  grid-template-areas: 'board pocket-top' 'board tools' 'board controls' 'board pocket-bot';
}
